<mat-toolbar-row>
  <div class="btn-group">
    <button type="button" class="btn btn-light" (click)="checkin()" *ngIf="isUserQualified()">
      <mat-icon svgIcon="add" style="color: green;"></mat-icon>
      {{"add" | translate}}
    </button>
  </div>

  <span class="header-spacer"></span>

  <div class="input-group" style="width: 280px !important;">
    <input type="text" [(ngModel)]="searchText" class="form-control" matTooltip="{{'searchPerson' | translate}}" placeholder="{{'searchPerson' | translate}}">
    <div class="input-group-append">
      <button class="btn btn-outline-secondary" type="button" id="button-addon1" (click)="refreshSearch()" matTooltip="{{'refreshSearch' | translate}}">
        <mat-icon svgIcon="search" style="color: lightgreen;"></mat-icon>
      </button>
    </div>
  </div>
</mat-toolbar-row>

<div class="wdl-container mat-elevation-z8">
  <div class="wdl-loading-shade" *ngIf="isLoadingResults">
    <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
  </div>

  <div class="wdl-table-container wdl-table-container-page">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"
 matSort matSortActive="name" matSortDirection="asc">
  <ng-container matColumnDef="number">
    <th mat-header-cell *matHeaderCellDef>{{"number" | translate}}</th>
    <td mat-cell *matCellDef="let element">{{element.number}}</td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{"name" | translate}}</th>
    <td mat-cell *matCellDef="let element">{{element.personName}}</td>
  </ng-container>

  <ng-container matColumnDef="sex">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{"sex" | translate}}</th>
    <td mat-cell *matCellDef="let element">{{element.sex | translate}}</td>
  </ng-container>

  <ng-container matColumnDef="rid">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{"rid" | translate}}</th>
    <td mat-cell *matCellDef="let element">{{element.rid}}</td>
  </ng-container>

  <ng-container matColumnDef="building">
    <th mat-header-cell *matHeaderCellDef>{{"building" | translate}}</th>
    <td mat-cell *matCellDef="let element">{{element.building}}</td>
  </ng-container>

  <ng-container matColumnDef="level">
    <th mat-header-cell *matHeaderCellDef>{{"level" | translate}}</th>
    <td mat-cell *matCellDef="let element">{{element.level}}</td>
  </ng-container>

  <ng-container matColumnDef="room">
    <th mat-header-cell *matHeaderCellDef>{{"room" | translate}}</th>
    <td mat-cell *matCellDef="let element">{{element.room}}</td>
  </ng-container>

  <ng-container matColumnDef="bed">
    <th mat-header-cell *matHeaderCellDef>{{"bed" | translate}}</th>
    <td mat-cell *matCellDef="let element">{{element.bed}}</td>
  </ng-container>

  <ng-container matColumnDef="nurse">
    <th mat-header-cell *matHeaderCellDef>{{"majorNurse" | translate}}</th>
    <td mat-cell *matCellDef="let element">{{element.nurseName}}</td>
  </ng-container>

  <ng-container matColumnDef="device1">
    <th mat-header-cell *matHeaderCellDef>{{"device1Id" | translate}}</th>
    <td mat-cell *matCellDef="let element">{{element.device1Id}}</td>
  </ng-container>

  <ng-container matColumnDef="device2">
    <th mat-header-cell *matHeaderCellDef>{{"device2Id" | translate}}</th>
    <td mat-cell *matCellDef="let element">{{element.device2Id}}</td>
  </ng-container>

  <ng-container matColumnDef="actions" stickyEnd>
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let element">
      <button mat-icon-button (click)="view(element)" matTooltip="{{'view' | translate}}">
        <mat-icon svgIcon="view" style="color: darkblue;"></mat-icon>
      </button>
      <button mat-icon-button (click)="modify(element)" matTooltip="{{'modify' | translate}}" *ngIf="isUserQualified()">
        <mat-icon svgIcon="edit" style="color: darkblue;"></mat-icon>
      </button>
      <button mat-icon-button (click)="remove(element)" matTooltip="{{'remove' | translate}}" *ngIf="isUserQualified()">
        <mat-icon svgIcon="delete" style="color: darkred;"></mat-icon>
      </button>
      <button mat-icon-button (click)="checkout(element)" matTooltip="{{'checkout' | translate}}" *ngIf="isUserQualified()">
        <mat-icon svgIcon="checkout" style="color: darkblue;"></mat-icon>
      </button>
      <button *ngIf="isUserQualified() && element.device1Id" mat-icon-button (click)="unbind(element)" matTooltip="{{'unbind' | translate}}">
        <mat-icon svgIcon="unbind" style="color: darkred;"></mat-icon>
      </button>
      <button *ngIf="isUserQualified() && !element.device1Id" mat-icon-button (click)="bind(element)" matTooltip="{{'bind' | translate}}">
        <mat-icon svgIcon="bind" style="color: darkblue;"></mat-icon>
      </button>
      <button *ngIf="isUserQualified() && element.device2Id" mat-icon-button (click)="unbindband(element)" matTooltip="{{'unbind' | translate}}">
        <mat-icon svgIcon="unbind" style="color: darkred;"></mat-icon>
      </button>
      <button *ngIf="isUserQualified() && !element.device2Id" mat-icon-button (click)="bindband(element)" matTooltip="{{'bind' | translate}}">
        <mat-icon svgIcon="bind" style="color: darkblue;"></mat-icon>
      </button>
      <button mat-icon-button (click)="viewHist(element)" matTooltip="{{'openHist' | translate}}">
        <mat-icon svgIcon="hist" style="color: darkblue;"></mat-icon>
      </button>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
  </div>

<mat-paginator
 [length]="resultsLength"
 [pageSize]="pageSize"
 [showFirstLastButtons]="true"
 [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
